<template>
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">

        <!-- logo -->
        <div id="logo" class="sidebar-header">
            <router-link to="/index" @click.native="flushCom"><img src="../../public/static/images/1.png" title="LightYear" alt="LightYear" /></router-link>
        </div>
        <div class="lyear-layout-sidebar-scroll">

            <nav class="sidebar-main">
                <ul class="nav nav-drawer">
                    <li class="nav-item" id="index"> <router-link to="/index" @click.native="flushCom"><i class="mdi mdi-home"></i> 后台首页</router-link> </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('local_company_manage')">
                        <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 本公司管理</a>
                        <ul class="nav nav-subnav">
                            <li id="user-list" v-if="permissionCheck('user_list')"> <router-link to="/user-list" @click.native="flushCom">用户列表</router-link> </li>
                            <li id="role-list" v-if="permissionCheck('role_list')"> <router-link to="/role-list" @click.native="flushCom">角色列表</router-link> </li>
                            <li id="permission-list" v-if="permissionCheck('permission_list')"> <router-link to="/permission-list" @click.native="flushCom">权限列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('sell_company_manage')">
                        <a href="javascript:void(0)"><i class="mdi mdi-account-multiple"></i> 卖方公司管理</a>
                        <ul class="nav nav-subnav">
                            <li id="seller-list" v-if="permissionCheck('seller_list')"> <router-link to="/seller-list" @click.native="flushCom">公司列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('client_company_manage')">
                        <a href="javascript:void(0)"><i class="mdi mdi-account-box"></i> 客户公司管理</a>
                        <ul class="nav nav-subnav">
                            <li id="client-list" v-if="permissionCheck('client_list')"> <router-link to="/client-list" @click.native="flushCom">公司列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('product_manage')">
                        <a href="javascript:void(0)"><i class="mdi mdi-cube"></i> 商品管理</a>
                        <ul class="nav nav-subnav">
                            <li id="product-list" v-if="permissionCheck('product_list')"> <router-link to="/product-list" @click.native="flushCom">商品列表</router-link> </li>
                            <li id="stock-list" v-if="permissionCheck('stock_list')"> <router-link to="/stock-list" @click.native="flushCom">库存列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('purchase_order_manage')" >
                        <a href="javascript:void(0)"><i class="mdi mdi-cart"></i> 采购订单管理</a>
                        <ul class="nav nav-subnav">
                            <li id="purchase-order-list" v-if="permissionCheck('purchase_order_list')"> <router-link to="/purchase-order-list" @click.native="flushCom">采购订单列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('inspection_order_manage')">
                        <a href="javascript:void(0)"><i class="mdi mdi-van-utility"></i> 进库验货订单管理</a>
                        <ul class="nav nav-subnav">
                            <li id="inspection-order-list" v-if="permissionCheck('inspection_order_list')"> <router-link to="/inspection-order-list" @click.native="flushCom">进库验货订单列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('sell_order_manage')" >
                        <a href="javascript:void(0)"><i class="mdi mdi-database"></i> 销售订单管理</a>
                        <ul class="nav nav-subnav">
                            <li id="sell-order-list" v-if="permissionCheck('sell_order_list')"> <router-link to="/sell-order-list" @click.native="flushCom">销售订单列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('out_order_manage')" >
                        <a href="javascript:void(0)"><i class="mdi mdi-home"></i> 出仓订单管理</a>
                        <ul class="nav nav-subnav">
                            <li id="out-order-list" v-if="permissionCheck('out_list')"> <router-link to="/out-order-list" @click.native="flushCom">出仓订单列表</router-link> </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-item-has-subnav" v-if="permissionCheck('incoming_order_manage')">
                        <a href="javascript:void(0)"><i class="mdi mdi-home-circle"></i> 入仓订单管理</a>
                        <ul class="nav nav-subnav">
                            <li id="incoming-order-list" v-if="permissionCheck('incoming_list')"> <router-link to="/incoming-order-list" @click.native="flushCom">入仓订单列表</router-link> </li>
                        </ul>
                    </li>
                </ul>
            </nav>


            <div class="sidebar-footer">
                <p class="copyright">Copyright &copy; 2021. <a target="_blank" href="https://space.bilibili.com/384182241">杨杨吖</a> All rights reserved.</p>
            </div>
        </div>

    </aside>
    <!--End 左侧导航-->
</template>

<script>

    export default {
        name: 'the-aside',
        data: function () {
            return {
            }
        },
        mounted:function () {
            let _this = this;
            // li标签高亮 父li标签展开
            let path = _this.$route.path;
            path = path.substring(1, path.length);
            $("li").removeClass("active");
            if(path === "user-list"){
                $("#user-list").addClass("active");
                $("#user-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "role-list"){
                $("#role-list").addClass("active");
                $("#role-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "permission-list"){
                $("#permission-list").addClass("active");
                $("#permission-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "product-list"){
                $("#product-list").addClass("active");
                $("#product-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "stock-list"){
                $("#stock-list").addClass("active");
                $("#stock-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "purchase-order-list"){
                $("#purchase-order-list").addClass("active");
                $("#purchase-order-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "inspection-order-list"){
                $("#inspection-order-list").addClass("active");
                $("#inspection-order-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "client-list"){
                $("#client-list").addClass("active");
                $("#client-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "seller-list"){
                $("#seller-list").addClass("active");
                $("#seller-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "sell-order-list"){
                $("#sell-order-list").addClass("active");
                $("#sell-order-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "out-order-list"){
                $("#out-order-list").addClass("active");
                $("#out-order-list").parent("ul").parent("li").addClass("open");
            }
            if(path === "incoming-order-list"){
                $("#incoming-order-list").addClass("active");
                $("#incoming-order-list").parent("ul").parent("li").addClass("open");
            }
        },
        methods: {
            flushCom(){
                let _this = this;
                _this.$router.go(0);
            },
            permissionCheck(url){
                let permissionList = Permission.getPermission();
                for(let i=0; i<permissionList.length; i++){
                    if(url === permissionList[i]){
                        return true;
                    }
                }
                return false;
            }
        }
    }
</script>
